import { enumStrokeColor, userPath, groupPath } from '../theme'

const iconSize = 24

const createSvgEl = name => document.createElementNS('http://www.w3.org/2000/svg', name)

const getSvgContainer = (w = 1024, h = 1024) => {
  const icon = createSvgEl('svg')
  icon.setAttribute('viewBox', `0 0 ${w} ${h}`)
  icon.setAttribute('width', iconSize)
  icon.setAttribute('height', iconSize)
  return icon
}

const getCircle = (r = 10) => {
  const c = createSvgEl('circle')
  c.setAttribute('cx', iconSize / 2)
  c.setAttribute('cy', iconSize / 2)
  c.setAttribute('r', r)
  c.setAttribute('fill', 'transparent')
  c.setAttribute('stroke-width', 2)
  c.setAttribute('stroke', enumStrokeColor.primary)
  return c
}

const getStartIcon = () => {
  const icon = getSvgContainer(iconSize, iconSize)
  const c = getCircle()
  icon.appendChild(c)
  return icon
}

const getUserIcon = () => {
  const { viewBox, d } = userPath
  const icon = getSvgContainer(viewBox.w, viewBox.h)
  d.forEach(it => {
    const p = createSvgEl('path')
    p.setAttribute('fill', enumStrokeColor.primary)
    p.setAttribute('d', it)
    icon.appendChild(p)
    icon.appendChild(p)
  })
  return icon
}

const getGroupIcon = () => {
  const { viewBox, d } = groupPath
  const icon = getSvgContainer(viewBox.w, viewBox.h)
  d.forEach(it => {
    const p = createSvgEl('path')
    p.setAttribute('fill', enumStrokeColor.primary)
    p.setAttribute('d', it)
    icon.appendChild(p)
  })
  return icon
}

const getGatewayIcon = () => {
  const icon = getSvgContainer(iconSize, iconSize)
  const c = createSvgEl('rect')
  const size = 16
  const center = (iconSize - size) / 2
  c.setAttribute('x', center)
  c.setAttribute('y', center)
  c.setAttribute('width', size)
  c.setAttribute('height', size)
  c.setAttribute('fill', 'transparent')
  c.setAttribute('stroke-width', 2)
  c.setAttribute('stroke', enumStrokeColor.primary)
  const g = createSvgEl('g')
  g.setAttribute('transform', `rotate(45, ${iconSize / 2}, ${iconSize / 2})`)
  g.appendChild(c)
  icon.appendChild(g)
  return icon
}

const getEndIcon = () => {
  const icon = getSvgContainer(iconSize, iconSize)
  const c1 = getCircle(10)
  const c2 = getCircle(6)
  icon.append(c1, c2)
  return icon
}

const FlowDnd = {
  name: 'flow-dnd',
  lf: null,
  __container: null,
  __installed: false,
  shapeList: [
    {
      type: 'flow:start',
      text: '开始',
      icon: getStartIcon,
    },
    {
      type: 'flow:user',
      text: '节点',
      properties: {
        icon: 'user',
      },
      icon: getUserIcon,
    },
    {
      type: 'flow:user',
      text: '投票',
      properties: {
        icon: 'group',
      },
      icon: getGroupIcon,
    },
    {
      type: 'flow:gateway',
      text: '分支',
      icon: getGatewayIcon,
    },
    {
      type: 'flow:end',
      text: '结束',
      icon: getEndIcon,
    },
  ],
  install(lf) {
    FlowDnd.lf = lf
  },
  render(lf, container) {
    if (FlowDnd.__installed) return
    FlowDnd.__installed = true
    FlowDnd.__container = container
    container.appendChild(FlowDnd.getDnd())
  },
  destroy() {
    FlowDnd.__container.innerHTML = ''
    FlowDnd.__installed = false
  },
  getDnd() {
    const { handleMouseDown } = FlowDnd
    const dndContainer = document.createElement('div')
    dndContainer.className = 'lf-dnd'
    FlowDnd.shapeList.forEach(shape => {
      const { icon, ...rest } = shape
      const dndItem = document.createElement('div')
      const dndText = document.createElement('div')
      const dndIcon = icon()
      dndItem.className = 'lf-dnd-item'
      dndText.innerText = rest.text
      dndItem.append(dndIcon, dndText)
      dndItem.onmousedown = () => handleMouseDown(shape)
      dndContainer.appendChild(dndItem)
    })
    return dndContainer
  },
  handleMouseDown(config) {
    FlowDnd.lf.dnd.startDrag(config)
  },
}

export default FlowDnd
